<script lang="ts" setup>
import { computed, ref } from 'vue';
import { onLoad } from '@dcloudio/uni-app';
import { useOrderStore, usePaymentStore } from '@/stores';
import { doPayment } from '@/api/wechat';
import { groupBy } from '@/utils';

const orderStore = useOrderStore();
const paymentStore = usePaymentStore();
const order = ref<any>({});
const total = ref<any>(0);
const merchants = ref<any>([]);

const buttonStyle = computed(() => {
	return { borderRadius: '14rpx', padding: '24rpx 0', fontSize: '30rpx' };
});

onLoad(async (param: any) => {
	const data = await orderStore.getConfirmOrder({ id: Number(param.orderId) });
	order.value = data.order;
	total.value = data.products.length;
	merchants.value = groupBy(data.products, ['merchantId', 'merchantName']);
});

async function handlePayment() {
	const response = await doPayment({ orderId: order.value.id });
	if (response.code === 20000) {
		paymentStore.doWechatPayment(response.data);
	}
}
</script>

<template>
	<x-container direction="vertical" bg-color="#F8F8F8" min-height="100vh" padding="20rpx 0" gap="20rpx">
		<x-container direction="vertical" bg-color="#fff" padding="32rpx" gap="32rpx" v-for="merchant in merchants">
			<x-text-icon direction="horizontal" type="store" :size="28" :text-props="{ size: 28, bold: true }">{{ merchant.merchantName }}</x-text-icon>
			<x-row v-for="product in merchant.children">
				<x-col flex="220rpx">
					<x-image width="200rpx" height="200rpx" :src="product.cover?.url" :radius="14"></x-image>
				</x-col>
				<x-col flex="auto">
					<x-container direction="vertical" justify="between" height="100%">
						<x-space direction="vertical" align="start" :size="20">
							<x-text color="#222222" :size="28" :line-height="36" align="justify" bold>{{ product.productName }}</x-text>
							<x-tag outline>到期未使用自动退款</x-tag>
						</x-space>
						<x-container justify="between" align="end" width="100%">
							<dlk-currency :value="product.price" :size="36"></dlk-currency>
							<dlk-quantity></dlk-quantity>
						</x-container>
					</x-container>
				</x-col>
			</x-row>
		</x-container>
		<x-container direction="vertical" bg-color="#fff" padding="32rpx">
			<x-text color="#222222" :size="32" bold>价格明细</x-text>
			<x-divider></x-divider>
			<x-container direction="vertical" gap="24rpx">
				<x-container justify="between" align="center">
					<x-space>
						<x-text color="#222222" :size="28" bold>商品总价</x-text>
						<x-text color="#999999" :size="24">共{{ total }}件宝贝</x-text>
					</x-space>
					<dlk-currency :value="parseFloat(order.priceTotal || 0)" :size="36" color="#222222"></dlk-currency>
				</x-container>
				<x-container justify="between" align="center">
					<x-text color="#222222" :size="28" bold>共减</x-text>
					<dlk-currency :value="0" :size="36"></dlk-currency>
				</x-container>
				<x-container justify="between" align="center">
					<x-text color="#222222" :size="28">促销立减</x-text>
					<dlk-currency :value="0" :size="36"></dlk-currency>
				</x-container>
				<x-container justify="between" align="center">
					<x-text color="#222222" :size="28">优惠券</x-text>
					<dlk-currency :value="0" :size="36"></dlk-currency>
				</x-container>
				<x-container justify="between" align="center">
					<x-text color="#222222" :size="28" bold>合计</x-text>
					<dlk-currency :value="parseFloat(order.amount)" :size="36" color="#222222"></dlk-currency>
				</x-container>
			</x-container>
		</x-container>
		<x-container direction="vertical" bg-color="#fff">
			<x-container justify="between" align="center" padding="24rpx 32rpx">
				<x-space align="center">
					<x-image src="/order-confirm/weixin.png" width="36rpx" height="36rpx" prefix></x-image>
					<x-text color="#222222" :size="28" bold>微信支付</x-text>
				</x-space>
				<x-checkbox checked></x-checkbox>
			</x-container>
		</x-container>
	</x-container>
	<x-action-bar>
		<x-container direction="vertical" gap="20rpx">
			<x-checkbox>
				<x-text color="#666666" :size="24">我已阅读并同意</x-text>
				<x-text color="#0022AB" :size="24">《大蓝卡支付协议》</x-text>
			</x-checkbox>
			<x-button type="primary" :custom-style="buttonStyle" @tap="handlePayment">立即支付</x-button>
		</x-container>
	</x-action-bar>
</template>

<style lang="scss" scoped></style>
